<template>
    <div id="account">
        <el-form :model="AdminUserAddRequest" :rules="account_rules" ref="AdminUserAddRequest" label-width="100px" class="demo-ruleForm">
        <div class="information-page">
                <el-form-item class="information-title">
                    <h1>基础信息</h1>
                </el-form-item>
                <div class="basic-information">
                <div class="information-left-page">
                    <el-form-item label="登录账号">
                        <el-input v-model="AdminUserAddRequest.account" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="AdminUserAddRequest.password" auto-complete="off" placeholder="请输入密码" @input="complexity(AdminUserAddRequest.password)"></el-input>
                        <div class="complexity" ref="complexity_bg">
                            <span :class="{ passwordbg: isValue === 1}">弱</span>
                            <span :class="{ passwordbg: isValue === 2 }">中</span>
                            <span :class="{ passwordbg: isValue === 3}">强</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="AdminUserAddRequest.checkPass" auto-complete="off" placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <div style="overflow: hidden;">
                        <div class="information-left">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="AdminUserAddRequest.name" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                        </div>
                        <div class="information-right">
                            <el-form-item label="手机" prop="mobile">
                                <el-input v-model="AdminUserAddRequest.mobile" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <el-form-item label="部门">
                        <el-select v-model="AdminUserAddRequest.dept" placeholder="请选择部门" style="width: 100%;">
                        <el-option label="研发部" value="shanghai"></el-option>
                        <el-option label="营销部" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职位">
                        <el-input v-model="AdminUserAddRequest.position" placeholder="请输入职位"></el-input>
                    </el-form-item>
                    <el-form-item label="部门负责人" style="text-align: left;">
                        <el-radio-group v-model="AdminUserAddRequest.responsible">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="information-left">
                        <el-form-item label="Email">
                            <el-input v-model="AdminUserAddRequest.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                    </div>
                    <div class="information-right">
                        <el-form-item label="QQ">
                            <el-input v-model="AdminUserAddRequest.qq" placeholder="请输入QQ号码"></el-input>
                        </el-form-item>
                    </div>
                </div>
                </div>
                <el-form-item class="information-title page-title">
                    <h1>账号权限<label style="color: rgb(145, 160, 177); font-size: 12px; font-weight: 300; margin-left: 30px;">权限与角色关联, 这样该账号的角色可完成权限设置</label></h1>
                </el-form-item>
                <el-form-item label="账号权限" class="group-page">
                    <el-checkbox-group v-model="AdminUserAddRequest.type" style="text-align: left;">
                        <el-checkbox label="系统管理员" name="type"></el-checkbox>
                    </el-checkbox-group>
                    <el-checkbox-group v-model="AdminUserAddRequest.type" style="text-align: left;">
                        <el-checkbox label="订单客服" name="type"></el-checkbox>
                    </el-checkbox-group>
                    <el-checkbox-group v-model="AdminUserAddRequest.type" style="text-align: left;">
                        <el-checkbox label="业务员" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
            <div class="foo-warpper" v-if="type === 'account'">
                <el-form-item label="权限明细" class="title">
                </el-form-item>
                <div class="page-foot">
                    <el-form-item>
                        <div class="page-main">
                        <div class="content-l h-eight line-h">结算</div>
                        <div class="content-l h-eight line-h">结算管理</div>
                        <div class="content-l h-eight line-b-h">
                            <div>应收结算</div>
                            <div>应付结算</div>
                        </div>
                        <div class="content-r-l padding-t">
                            <ul>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                    <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                    <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                    <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                    <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                    <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                    <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                    <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                    <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                    <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                    <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                            </ul>
                        </div>
                        <div class="content-r-l padding-b">
                            <ul>
                            <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                            <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </li>
                            <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </li>
                            <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </li>
                            <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="订单商品登记查看" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </li>
                            </ul>
                        </div>
                        </div>
                        <div class="hotel-administer">
                            <div class="hotel-l hotel-l-bg">酒店</div>
                            <div class="hotel-l">酒店管理</div>
                            <div class="hotel-select">
                            <ul>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                                <li>
                                <el-checkbox-group v-model="permissions.type">
                                <el-checkbox label="新增订单" name="type"></el-checkbox><br />
                                <el-checkbox label="新增订单" name="type"></el-checkbox>
                                </el-checkbox-group>
                                </li>
                            </ul>
                            </div>
                        </div>
                    </el-form-item>
                </div>
            </div>
          <ButtonFooter />
        </el-form>
    </div>
</template>
<script>
const ButtonFooter = () => import('@/components/common/ButtonFooter')
export default {
  name: 'AddAccount',
  props: ['formType'],
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.AdminUserAddRequest.checkPass !== '') {
          this.$refs.AdminUserAddRequest.validateField('checkPass')
        }
        callback()
      }
    }
    var validateCheckPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.AdminUserAddRequest.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isValue: 0,
      type: this.formType,
      AdminUserAddRequest: {
        account: '',
        name: '',
        mobile: '',
        password: '',
        checkPass: '',
        dept: '',
        position: '',
        responsible: '',
        email: '',
        qq: '',
        type: ''
      },
      permissions: {
        type: ''
      },
      account_rules: {
        pass: [
          {required: true, validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {required: true, validator: validateCheckPass, trigger: 'blur'}
        ],
        name: [
          {required: true, message: '联系人不能为空', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '手机号不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    cancel () {
      this.$router.go(-1)
    },
    complexity (value) {
      const weak = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/
      const medium = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*.]+$/
      const strong = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*.]+$)(?![\d!@#$%^&*.]+$)[a-zA-Z\d!@#$%^&*.]+$/
      if (value.length >= 6 && value.length <= 16) {
        if (weak.test(value)) this.isValue = 1
        if (medium.test(value)) this.isValue = 2
        if (strong.test(value)) this.isValue = 3
      } else {
        this.isValue = 0
      }
    }
  },
  components: {
    ButtonFooter
  }
}
</script>
<style lang="scss">
     .page-title, .title {
        margin-bottom: 0;
    }

    .group-page {
        margin-bottom: 0;
        .el-checkbox-group {
            float: left;
            margin-right: 20px;
        }
    }

    .foo-warpper {
        padding: 0 20px 20px 20px;
    }

    .information-page {
        padding: 20px 30px;
      font-size: 12px;
        .basic-information, .account-permissions {
            overflow: hidden;
            .information-left-page {
                width: 47%;
                float: left;
            }
            .information-right-page {
                width: 47%;
                float: right;
            }
        }
        .basic-information {
            .information-left-page {
                .information-title {
                    .el-form-item__content {
                        margin-left: 0!important;
                    }
                }
                .area {
                    text-align: left;
                }
            }
        }
        h1 {
            color: #6d2377;
            text-align: left;
        }
    }

    .h-eight {
      height: 130px;
    }
    .line-h {
      width: 6%;
      line-height: 130px;
      text-align: center;
      border-right: 1px solid #e6e6e6;
    }
    .line-b-h {
      width: 4.5%;
      line-height: 4.5;
      border-right: 1px solid #e6e6e6;
    }
    .padding-b {
      line-height: 2;
      padding-bottom: 17px;
    }
    .padding-t {
      width: 73.4%;
      line-height: 2;
      padding-top: 22px;
      border-bottom: 1px solid #e6e6e6;
    }
    .hotel-l-bg {
      background-color: #eef1f9;
    }

    .el-select>.el-input {
    display: inline-block;
}

.information-left {
    width: 50%;
    float: left;
}
.information-right {
    width: 50%;
    float: left;
}
.information-title {
    .el-form-item__content {
        margin-left: 0!important;
    }
}

.complexity {
    text-align: left;
    overflow: hidden;
    span {
        margin-top: 5px;
        line-height: 2;
        color: white;
        padding: 0 40px;
        text-align: center;
        display: inline-block;
        background-color: #e9ecf3;
        float: left;
        margin-right: 2px;
        font-size: 12px;
    }
}
.passwordbg {
    background-color: #6d2377!important;
}

.add-account .el-form .el-form-item label {
    text-align: right;
}
.group-page{
  position: relative;
  .role-warning{
    height: 20px;
    color: #f1544a;
    position: absolute;
    top: 25px;
    left: 0;
  }
}

    
</style>
